<!-- 操作日志列表 
    从分页组件传了两个事件过来changLimit、changPage
-->
<template>
    <div class="main"  @scroll.passive="scrollTop($event)">
        <div>
            <el-input v-model="input" placeholder="请输入管理ID" clearable @keyup.enter.native="search"/>
            <el-button type="primary" :icon="Search" @click="search">查找</el-button>
        </div>
        <div>
            <el-table :data="obj.tableData" border style="width: 100%;">
                <el-table-column prop="id" label="日志ID" align="center" />
                <el-table-column prop="adminId" label="管理员ID" align="center" />
                <el-table-column prop="requestId" label="请求ID" align="center" />
                <el-table-column prop="group" label="API分组" align="center" />
                <el-table-column prop="method" label="API方法" align="center" />
                <el-table-column prop="time" label="操作时间" align="center" />
            </el-table>
        </div>
        <div>
            <Paging v-bind="pagingDatas" @page-change="pageChange"></Paging>
        </div>
        <el-backtop :right="100" :bottom="100" ref="main" target=".main"  :visibility-height="0"  v-if="bool"/>
    </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref,watch } from 'vue'
import { get } from "@/utils/request"
import { Search } from '@element-plus/icons-vue'
import Paging from "@/components/paging/Paging.vue";
import { ElMessage } from 'element-plus'
import { ClassPagination } from "#/index";


let bool = ref(true)  //用来判断滚动组件的显示隐藏
let rollHeight = ref(0)  //滚动距离
let id = ref("")  //用来传递管理员id
const obj = reactive({
    tableData: []//操作日志列表
})
const main = ref()  //滚动组件对象的引用
const input = ref('')//搜索框
//请求分页的数据
let pagingDatas = reactive(new ClassPagination)

const initialize = () => {//初始化操作日志列表
    // 初始化数据
    const datas = {
        _gp: 'admin.log',
        _mt: 'list',
        targetAdminId:id.value,
        page: pagingDatas.page,
        limit: pagingDatas.limit
    }
    get(datas).then((res) => {
        console.log(res)
       if(200==res.errno){
        obj.tableData = res.data.items
        let data = new Date()//获取当前的时间
        let time = data.getTime()//将当前时间格式转换成时间戳格式
        pagingDatas.total = res.data.total //获取总条数
        obj.tableData.forEach((item) => {
            let date = new Date(item['gmtCreate']) //把操作日志列表里面的时间戳转为时间格式
            let year = date.getFullYear() + '年'   //年份
            let month = (date.getMonth()< 10 ? '0' + (date.getMonth()+1): date.getMonth()+1) + '月'//月份
            console.log(month)
            let day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日'//日
            let hours = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + '时'//小时
            let branch = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + '分'//分钟

           //当前显示的时间戳减去表格里面的时间搓
            let timeDifference = time - item['gmtCreate']
            //判断相差的时间搓是否小于30秒
            if (timeDifference<1000*30) {
                Object.assign(item, {time: '刚刚' })  //合并成一个新对象
            } else if (timeDifference<1000*60*60 ){   //判断相差的时间搓是否小于1分钟
                let minute = timeDifference / (1000 * 60)
                let minutes = (Math.floor(minute) < 1 ? 1 : Math.floor(minute)) + '分钟前'
                Object.assign(item, { time: minutes })
            } else if (timeDifference<1000*60*60*24) {
                let hour = timeDifference / (1000 * 60 * 60 * 24)
                let hours = (Math.floor(hour)<1?1:Math.floor(hour)) + '小时前'
                Object.assign(item, { time: hours })
            } else if (timeDifference<1000 * 60 * 60 * 48) {
                Object.assign(item, { time: '2天前' })
            } else {
                Object.assign(item, { time: year + month + day + hours + branch })
            }
         });
       }else{
          ElMessage.error(res.errmsg)
          pagingDatas.total = 0
          obj.tableData = []
       }
    }).catch(error => {
        console.log(error)
    })
}
//分页组件每次调用事件
function pageChange(e: TypePaGing) {
    pagingDatas.page = e._page
    pagingDatas.limit = e._limit
    initialize()
    nextTick(() => {
        main.value.$el.click?.()
    })
}


//滚动事件
let scrollTop=(e:Event)=>{
    rollHeight.value=Math.floor((e.target as EventTarget).scrollTop)
}
//监听滚动的距离
watch(rollHeight,(val:number)=>{
//    console.log(val);
  bool.value = val>60
})

//搜索事件
const search = ()=>{
    id.value = input.value
    pagingDatas.page= 1
    initialize()
}

initialize()
</script>

<style scoped lang="less">
.main {
    >div:nth-child(1) {
        margin-top: 15px;
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .el-input {
            width: 200px;
            margin-right: 20px;
        }
    }
}
</style>

